<%@page import="com.elookinto.wordlist.MobileDeviceDetector"%>
<%@page contentType="text/html" pageEncoding="UTF-8" import="java.io.*, java.sql.*, javax.sql.*, org.brickred.socialauth.*"%>
<%
    Cookie cookies[] = request.getCookies();
    Cookie myCookie = null;
    String cookieUid = "uid";
    if (cookies != null) {
        for (int i = 0; i < cookies.length; i++) {
            // out.println(cookies[i].getName() + "--- " + cookies[i].getValue() + "<br/>");
            if (cookies[i].getName().equals(cookieUid)) {
                myCookie = cookies[i];
                break;
            }

        }
    }
    String uid = null;
    String loginAccount = null;
    if (session.getAttribute("uid") == null) {
        SocialAuthManager manager = (SocialAuthManager) session.getAttribute("authManager");
        try {
            if (manager != null) {
                java.util.Map<String, String> paramsMap = org.brickred.socialauth.util.SocialAuthUtil.getRequestParametersMap(request);
                AuthProvider provider = manager.connect(paramsMap);
                if (provider != null) {
                    Profile p = provider.getUserProfile();
                    if (p != null && p.getEmail() != null) {
                        uid = p.getEmail();
                    } else {
                        uid = p.getFullName() + p.getDisplayName();
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        loginAccount = uid;
    }

    if (uid != null) {
        session.setAttribute("uid", uid);
    } else {
        if (myCookie != null) {
            uid = myCookie.getValue();
            session.setAttribute("uid", uid);
        } else {
            uid = request.getRemoteHost();
            session.setAttribute("uid", uid);
        }
    }
    if (uid == null) {
        uid = request.getRemoteHost();
    }
    //out.println("uid=" + uid);
    Cookie cookie = new Cookie("uid", session.getAttribute("uid").toString());
    cookie.setMaxAge(365 * 24 * 60 * 60);
    response.addCookie(cookie);
     boolean isMobile = isMobile(request, session);
%>
<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <meta name="title" content=" YouAudio" />
        <meta name="description" content=" You audio " />
        <meta property="og:title" content="Word List" /> 
        <meta property="og:description" content="This word list app is the best tool to help boost your/your family vocabulary. " /> 
        <title> You Audio </title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/wordlist.css"/> 
        <link rel="stylesheet" type="text/css" href="css/button.css"/> 
        <link rel="stylesheet" type="text/css" media="screen" href="../css/atd.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <script type="text/javascript" src="../js/jquery.cookie.js"></script>
        <script type="text/javascript" src="../js/jquery.limit.js"></script>
        <script src="../js/jquery.atd.textarea.js"></script>
        <script src="../js/csshttprequest.js"></script>
        <script type="text/javascript" src="../js/wordlist.js"></script>
        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-9033082-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

        </script>
        <script type="text/javascript">
            $.ajaxSetup({
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
            });
            $(document).ready(function() {
                $.get("retrieve.jsp", function (data2) {
                    $("#audios").html(data2);
                })
                $('#upload').limit('1000','#charsLeft');
                $('#note').limit('1000','#charsLeft');
            });
            
            if (typeof window.addEventListener != 'undefined')  {
                window.addEventListener('message', receiver, false);
            }
            
            function receiver(e) {
                //alert(e.data);
                //$("#record").html(e.data);
                if (e.data.substring(0,4)=='http') {
                    $("#url").val(e.data);
                    $("#saveTable").show();
                    //var iframe = document.getElementById("record");
                    //iframe.src = iframe.src;
 
                }
            }
            function del(uid, url) {
                $.get("delete.jsp", {uid:uid, url:url},
                function (data) {
                    if ($.trim(data) == "deleted") 
                        $.get("retrieve.jsp", function (data2) {
                            $("#audios").html(data2);
                        })
                }    
            );
            }
            
            function save() {
                $("#record").show();
                $("#saveTable").hide();
                url = $.trim($("#url").val());
                desc = $.trim($("#desc").val());
                uid = $.trim($("#uid").val());
                title = $.trim($("#title").val());
                tag = $.trim($("#tag").val());
                //var div = document.createElement("div");
                //div.innerHTML = title;
                //title = div.innerText;
                $.post("save.jsp", {url: url, desc: desc, uid:uid , title:title, tag:tag},
                
                function(data) {
                    $.get("retrieve.jsp", function (data2) {
                        $("#audios").html(data2);
                    })
                }
            )
                
            }
            
            var currentSelected;
            function playAudio(url, o)
            {
                if (currentSelected)
                    $(currentSelected).css("color", $(o).css("color"));
                currentSelected = o;
                $(currentSelected).css("color", "brown");
                
                index = url.lastIndexOf("/");
                //alert(url.substring(index+1));
                $("#audioFrame").attr('src', "audioFrame.jsp?audioID="+(url.substring(index+1)));

            }
         
           
        </script>

        <script type="text/javascript">
    
            function commentDialogMouse(myid)
            {
                //$('#commentDialog').dialog('destroy');
                $.get("retrieveComment.jsp",{id: myid}, function(data){
                    //alert(data);
                    $("#comments").html(data); 
                });
                $ ("#commentDialog" ).dialog({
                    resizable: false,
                    height:480,
                    width:240,
                    //modal: true,
                    position: "right",
                    close: function() {
                 
                    }
            
                });

            }
    
            function addDialog(myid)
            {
                //$('#addDialog').dialog('destroy');
                $("#mycomment").val("");
                $ ("#addDialog" ).dialog({
                    resizable: false,
                    height:280,
                    width:800,
                    modal: true,
                    position: "center",
                    close: function() {
                
                    },
                    buttons: {
                        "Save": function() {
                 
                            $.ajax(  {
                                url: "retrieveComment.jsp",
                                success: function(data)
                                {
                                    $.post("retrieveComment.jsp",{id: myid, comment: $("#mycomment").val()}, function(data){
                                        $("#comments").html(data); 
                                    }); 
                                }
                            } );
                            jQuery( this ).dialog( "close" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

            }

        </script>

        <style type="text/css">

            .comm {
                display:none;
                width:70%;
                height:200px;
                border:2px solid gray;
            }
        </style>

    </head>
    <body>
        <div class="wrapper">
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=395273910509570";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div>
                <div class="topmenu">
                    <%@include file="../WEB-INF/jspf/menu.jspf" %>
                </div>
                <h2 align="center"> YouAudio  
                </h2>
                <br/><br/>
            </div>



            <div style="text-align: center">


                <div style="text-align: center">
                    <%
                        if (uid.equals(request.getRemoteHost())) {%>

                    Optionally, log on with
                    <a href="facebook.jsp"><img  src="http://opensource.brickred.com/socialauthdemo/images/facebook_icon.png" /></a>
                    <a href="yahoo.jsp"><img  src="http://opensource.brickred.com/socialauthdemo/images/yahoomail_icon.jpg" /></a>
                    <a href="twitter.jsp"><img src="http://opensource.brickred.com/socialauthdemo/images/twitter_icon.png" /></a>

                    <%} else {%>
                    <a href="logout.jsp"> logout </a>
                    <%}%>
                </div>


                <span style="color:red;" id="message" >  </span>
                <br/>
                <!--
               <iframe src="messageframe.jsp"> </iframe> -->
                <div  style="width:100%">
                    <div  style="float: left;width:525px;height:700px">
                        <iframe id="record" src="http://vocaroo.com/?minimal" width="525" height="300" frameborder="0" style="float: left"></iframe>
                        <div style="text-align:left">
                            <h3>方舟子获奖感言 </h3>

                            "I'm truly honoured to receive (the) John Maddox Prize. Science in China
                            faces great challenges from superstition, psuedoscience, anti-science and
                            scientific misconduct. There are more and more Chinese people (who) realise
                            this is a big problem and are standing up for science. I consider this award
                            as an acknowledgement of our efforts from (the) international science
                            community and I deeply appreciate it. Thank you."
                        </div>
                        <a href="xbbit.html" style="font-weight:bold"> xbbit's emulations </a> <br/>                   
                        <iframe width="480" height="300"   src="http://www.youtube.com/embed/HoY3fAGcKzo?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
                    </div> 
                    <table id="saveTable" align="center" style="display: none; margin:auto;float:left;">
                        <tr>
                            <td>Audio URL: </td> <td> <input id="url"  readonly style="width: 300px"  maxlength="50" /> </td></tr>
                        <tr>
                            <td>User ID: </td> <td> <input  id="uid" style="width: 300px" size="50" maxlength="50" value="<%=uid%>"/></td></tr>
                        <tr>
                            <td>Tag </td> <td> <input id="tag" style="width: 300px" size="50" maxlength="50"/></td></tr>
                        <tr>
                            <td>Audio Title </td> <td> <input id="title" style="width: 300px" size="50" maxlength="50"/></td></tr>
                        <tr>
                            <td> Description </td> <td> <textarea id="desc" style="width: 300px" rows="5" > </textarea></td></tr>

                        <tr>
                            <td colspan="2"> <button onclick="save()"> Save </button> </td> </tr>
                    </table>

                    <div id="audios" style="width:700px;float:left;text-align: left;margin-left:4px">

                    </div>
                    <div style="float:right;width:320px;height: 45px;padding-right:10px;margin-right:10px"> 
                        <iframe id="audioFrame" src="audioFrame.jsp" style="float:right;width:300px;height: 40px"> </iframe>
                        <br/> <br/>
                        <br/>
                        <script type="text/javascript"><!--
                        google_ad_client = "ca-pub-1830488441040930";
                        /* googlead */
                        google_ad_slot = "3942024870";
                        google_ad_width = 120;
                        google_ad_height = 600;
                        //-->
                        </script>
                        <script type="text/javascript"
                                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                        </script>
                    </div>
                </div>



            </div>
            <div class="push"> </div>
        </div>
        <div class='footer' style="width:100%;text-align:center">

            Copyright (c) 2012, elookinto.  <a style="text-decoration: none" href="https://groups.google.com/forum/?fromgroups#!forum/wordlists" target="support"> Support Forum </a>

        </div>

    </div>


    <div id="commentDialog" title="Comments" style="background:lightgray;height: 200px;width:120px;font-size: small;display: none">
        <div id="comments" >

        </div>


    </div>

    <div id="addDialog" title="Add Comment" style="background:lightgray;height: 200px;width:80%;font-size: small;display: none">

        <div>
            <textarea rows="5" cols="90" id="mycomment">
        
            </textarea>
        </div>

    </div>


</body>
</html>

<%!
    static boolean isMobile(HttpServletRequest request, HttpSession session) {
        if (session.getAttribute("mobile") != null) {
            return (Boolean) session.getAttribute("mobile");
        }
        String ua = request.getHeader("User-Agent").toLowerCase();
        java.util.regex.Pattern p = java.util.regex.Pattern.compile(".*(iPhone|mobile|iPod|blackberry|DoCoMo|cldc|android|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii).*", java.util.regex.Pattern.CASE_INSENSITIVE);
        java.util.regex.Matcher matcher = p.matcher(ua);
        if (matcher.matches()) {
            session.setAttribute("mobile", true);
            return true;
        } else {
            session.setAttribute("mobile", false);
            return false;
        }
    }

    enum Browser {

        IE,
        Firefox,
        CHROME;
    };

    static Browser browser(HttpServletRequest request) {
        String ua = request.getHeader("User-Agent");

        if (ua != null && ua.indexOf("MSIE") != -1) {
            return Browser.IE;
        }

        if (ua != null && ua.indexOf("Chrome/") != -1) {
            return Browser.CHROME;
        }
        //boolean isSafari = (!isChrome && (ua != null && ua.indexOf("Safari/") != -1));

        if (ua != null && ua.indexOf("Firefox/") != -1) {
            return Browser.Firefox;
        }
        return null;

    }
%>